
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识setup</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
        /*
        **
    toRef 与 ref 区别【参数】
    1)ref的参数是1个
    2)toRef有2个参数，第一个参数是对象，第二个参数是对象里边的属性;【原理】
    1)ref 是对原数据的一个深拷贝，不改变原始数据的值;
    2)toRef对原始数据的一个引用，改变以后会更新原始数据的值*/
        const { ref, reactive, toRef } = Vue
        const app = Vue.createApp({
            template: `
            <div>
                <h1>我的信息</h1>
                <h2>姓名：andy</h2>
                <h2>性别：sex</h2>
                <h2>年龄：age</h2>
                <button @click="changeInfo" > 修改信息</button>
            </div>
        `,
        
       setup(props){
           let name =ref('andy');
           let age = 25;
           let age1 = ref(25);
           let job = {type: '前端工程师'}

           let job1 = reactive(job)
           let type = toRefs(job);
           let salary = toRef(job1,'salary');
           setTimeout(() => {
               age1.value = 30;
               console.log('type = ',type,'salary = ',salary.value);

               //job.type = 'UI设计师'
               //job.salary = '60k'
               type.value = 'UI设计师'
               salary.value ='60k'
               console.log(job)
           },2000);
           return {name,age,job,type,salary,age1}
       }
    })

    const vm = app.mount("#app")
</script>
</html>